<template>
  <view class="level-container">
    <!-- 传统纹样背景 -->
   <!-- <image 
      class="cultural-bg" 
      src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/level_bg.png"
      mode="aspectFill"
    ></image> -->

    <!-- 等级展示主体 -->
    <view class="level-main">
      <!-- 传统卷轴式标题 -->
      <view class="scroll-header">
        <!-- <image 
          class="scroll-ends" 
          src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/scroll_left.png"
          mode="aspectFit"
        ></image> -->
        <text class="title">掼牛修为天梯</text>
      <!--  <image 
          class="scroll-ends" 
          src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/scroll_right.png"
          mode="aspectFit"
        ></image> -->
      </view>

      <!-- 当前等级展示 -->
      <view class="current-level">
        <image 
          class="yinzhang" 
          :src="currentLevelInfo.icon"
          mode="aspectFit"
        ></image>
        <view class="level-info">
          <text class="level-title">{{ currentLevelInfo.title }}</text>
          <text class="score">当前修为：{{ userScore }} 积分</text>
          <view class="progress">
            <text class="label">下阶需达：</text>
            <text class="value">{{ currentLevelInfo.nextRequire }} 积分</text>
          </view>
        </view>
      </view>

      <!-- 等级阶梯 -->
      <scroll-view class="level-list" scroll-y>
        <view 
          v-for="(level, index) in danLevels" 
          :key="index"
          class="level-item"
          :class="{ current: index === currentDan }"
        >
          <view class="level-left">
            <image 
              class="level-icon"
              :src="getLevelIcon(index)"
              mode="aspectFit"
            ></image>
            <view class="level-meta">
              <text class="level-name">{{ level }}</text>
              <text class="require">下级修为要求：{{ getRequireScore(index) }}积分</text>
            </view>
          </view>
          <!-- <image 
            class="level-badge"
            src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/bullhead_icon.png"
            mode="aspectFit"
          ></view> -->
        </view>
      </scroll-view>

      <!-- 返回按钮 -->
      <view class="back-btn" @click="navigateBack">
        <!-- <image 
          src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/back_btn.png"
          mode="aspectFit"
        ></image> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      danLevels: ['初窥内径的小牛倌', '崭露头角的牛犊力士', '坚毅果敢的斗牛新锐', 
                 '技艺精湛的掼牛巧匠', '力挽狂澜的伏牛英雄','霸气外露的牛王悍将',
                 '德艺双馨的掼牛宗师','传奇不朽的掼牛圣尊'],
      userScore: 1850, // 当前用户积分
      levelIcons: [
        'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/danImage/1.png',
        'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/danImage/2.png',
        'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/danImage/3.png',
        'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/danImage/4.png',
        'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/danImage/5.png',
        'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/danImage/6.png',
        'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/danImage/7.png',
        'https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/danImage/8.png',
      ]
    }
  },
  computed: {
    currentDan() {
      const score = this.userScore;
      if (score >= 6000) return 7
      else if (score >= 4300) return 6
      else if (score >= 3000) return 5
      else if (score >= 2000) return 4
      else if (score >= 1200) return 3
      else if (score >= 600) return 2
      else if (score >= 200) return 1
      return 0
    },
    currentLevelInfo() {
      return {
        title: this.danLevels[this.currentDan],
        icon: this.levelIcons[this.currentDan],
        nextRequire: this.getRequireScore(this.currentDan)
      }
    }
  },
  methods: {
    getRequireScore(index) {
      const requirements = [200, 600, 1200, 2000, 3000, 4300, 6000];
      return index < requirements.length ? requirements[index] : '∞'
    },
    getLevelIcon(index) {
      return this.levelIcons[index] || this.levelIcons[0]
    },
    navigateBack() {
      uni.navigateBack()
    }
  },
   onLoad(options) {
     if (options.userInfo) {
       try {
         this.userInfo = JSON.parse(decodeURIComponent(options.userInfo));
         console.log(this.userInfo)
         this.userScore = this.userInfo.score
       } catch (e) {
         console.error('参数解析失败', e);
       }
     }
   }
}
</script>

<style lang="scss" scoped>
.level-container {
  height: 100vh;
  position: relative;
  overflow: hidden;

  .cultural-bg {
    width: 100%;
    height: 100%;
    filter: sepia(0.3) brightness(0.9);
  }

  .level-main {
    position: absolute;
    top: 40rpx;
    left: 30rpx;
    right: 30rpx;
    bottom: 30rpx;
    background: rgba(255, 248, 240, 0.9);
    border-radius: 20rpx;
    box-shadow: 0 8rpx 24rpx rgba(139, 69, 19, 0.2);
    padding: 30rpx;

    .scroll-header {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 40rpx;

      .scroll-ends {
        width: 60rpx;
        height: 120rpx;
      }

      .title {
        font-size: 44rpx;
        color: #8B4513;
        font-family: '华文行楷';
        margin: 0 20rpx;
        text-shadow: 2rpx 2rpx 4rpx rgba(139, 69, 19, 0.2);
      }
    }

    .current-level {
      display: flex;
      background: linear-gradient(135deg, #EDDAC2, #D2B48C);
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 40rpx;
      box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);

      .yinzhang {
        width: 160rpx;
        height: 160rpx;
        margin-right: 30rpx;
      }

      .level-info {
        flex: 1;
        .level-title {
          display: block;
          font-size: 36rpx;
          color: #8B4513;
          font-weight: bold;
          margin-bottom: 20rpx;
        }
        .score {
          font-size: 28rpx;
          color: #A0522D;
        }
        .progress {
          margin-top: 20rpx;
          .label {
            font-size: 26rpx;
            color: #666;
          }
          .value {
            font-size: 28rpx;
            color: #CD5C5C;
            font-weight: bold;
          }
        }
      }
    }

    .level-list {
      height: 60vh;
      .level-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 25rpx;
        margin-bottom: 20rpx;
        background: rgba(237, 218, 194, 0.5);
        border-radius: 12rpx;
        border-left: 8rpx solid #D2B48C;

        &.current {
          background: #EDDAC2;
          border-left-color: #8B4513;
        }

        .level-left {
          display: flex;
          align-items: center;
          .level-icon {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
          }
          .level-meta {
            .level-name {
              display: block;
              font-size: 30rpx;
              color: #333;
              font-weight: 500;
            }
            .require {
              font-size: 26rpx;
              color: #666;
            }
          }
        }

        .level-badge {
          width: 60rpx;
          height: 60rpx;
          opacity: 0.8;
        }
      }
    }

    .back-btn {
      position: absolute;
      bottom: -80rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 120rpx;
      height: 120rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>